<template>
    
  <div class="app-container">
        讲师表单     <!-- 添加讲师表单idea--EduTeacher对象 -->
        <el-form label-width="120px">
            <el-form-item label="讲师名称">
                <el-input v-model="eduTeacher.name" />
                <!-- 对象eduTeacher 根据teacher.js的参数一样data: eduTeacher//传的json串 -->
              </el-form-item
      >
            <el-form-item label="讲师排序">
                <el-input-number
          v-model="eduTeacher.sort"
          controls-position="right"
          min="0"
        />
              </el-form-item
      >
            <el-form-item label="讲师头衔">
                <el-select
          v-model="eduTeacher.level"
          clearable
          placeholder="请选择"
        >
                    <!--
            数据类型一定要和取出的json中的一致，否则没法回填
            因此，这里value使用动态绑定的值，保证其数据类型是number
          -->
                    <el-option :value="1" label="高级讲师" />
                    <el-option :value="2" label="首席讲师" />
                  </el-select
        >
              </el-form-item
      >
            <el-form-item label="讲师资历">
                <el-input v-model="eduTeacher.career" />       </el-form-item
      >
            <el-form-item label="讲师简介">
                <el-input
          v-model="eduTeacher.intro"
          :rows="10"
          type="textarea"
        />
                <!-- 多了一个 文本域 type="textarea" -->
              </el-form-item
      >
            <!-- 讲师头像：TODO -->

            <el-form-item>
                <el-button
          :disabled="saveBtnDisabled"
          type="primary"
          @click="saveOrUpdate"
          >保存</el-button
        >
                <!-- 不可操作的默认值是可以操作：所以为false type="primary:主要按钮 -->
              </el-form-item
      >
          </el-form
    >
      
  </div>
</template>
//template模板  包含页面元素

<script>
import teacher from "@/api/teacher"; // @/ src目录下  ，js可以省略
export default {
  data() {
    return {
      eduTeacher: {}, //表单数据
      saveBtnDisabled: false, //按钮是否不可操作   默认flase，可以操作
    };
  },
  created() {
    //第2个钩子方法，vue属性，方法 已经初始化
  },
  methods: {
    saveOrUpdate() {
      teacher
        .addTeacher(this.eduTeacher)
        .then((response) => {
          return this.$message({
            type: "success",
            message: "添加成功!",
          });
        })
        // 添加成功之后路由跳转 到分页页面
        .then((resposne) => {
          this.$router.push({ path: "/teacher/list" });
        })
        .catch((response) => {
          // console.log(response)
          this.$message({
            type: "error",
            message: "保存失败",
          });
        });
    },
  },
};
</script>